<template>
  <div class="w-[100%] h-[100%]">

    <div class="bg-[#FAFAFC] rounded-[8px] px-[24px] py-[24px]">
      <div class="flex">
        <div class="label w-[155px] mr-[30px] flex-center" style="align-items: flex-start">
          是否开启物流查询
        </div>
        <div class="value">
          <div>
            <el-switch v-model="config.isQuery"/>
          </div>
          <div class="text-[#999999]">
            开启运单号将能实时查询到物流服务商的物流轨迹，同时如果开启短信功能，也会影响发货、取件通知生成。
          </div>

        </div>
      </div>

      <div class="flex mt-[15px]">
        <div class="label w-[155px] mr-[30px] flex-center" style="align-items: flex-start">
          查询通道
        </div>
        <div class="value">
          <el-radio v-model="config.radio" label="51tracking">51tracking</el-radio>
        </div>
      </div>

      <div class="flex mt-[15px]">
        <div class="label w-[155px] mr-[30px] flex-center" style="align-items: flex-start">
          落地页显示物流查询入口
        </div>
        <div class="value">
          <div>
            <el-switch v-model="config.isQuery"/>
          </div>
          <div class="text-[#999999]">
            开启后在查询订单页面支持查询订单状态和物流情况
          </div>

        </div>
      </div>
    </div>

    <div class="line mt-[30px]" style="border-bottom: dashed 1px #DDDDDD"></div>

    <div class="mt-[30px]">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="true" @query="handleSearchQuery"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="false"
      />

    </div>


  </div>
</template>
<script setup lang="ts">
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import ImagePreview from "@/components/ImagePreview/index.vue";
import QueryTable from "@/components/TableData/index.vue";
import type {PurchaseAdvice} from "@/api/purchase/advice/type";
const initQueryParams = {
  pageNo: 1, pageSize: 10
}
const config = ref({
  isQuery: false
})

const searchList: TradeOrderQueryVO[] = [
  {
    label: '订单编号',
    code: 'orderNo',
    type: 'input'
  },

  {
    label: '地区',
    code: 'area',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '下单日期',
    code: 'orderTime',
    type: 'dateRange'
  },
  {
    label: '商品信息',
    code: 'shopInfo',
    type: 'input',
    placeHolder: '商品名称/商品ID/sku'
  },
  {
    label: '下单信息',
    code: 'orderInfo',
    type: 'input'
  },
  {
    label: '下单链接',
    code: 'orderLink',
    type: 'input'
  },
  {
    label: '物流单号',
    code: 'no ',
    type: 'input'
  },
  {
    label: '归属部门',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '归属人员',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '订单来源',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: 'IP',
    code: 'no',
    type: 'input'
  },
  {
    label: '留言/备注',
    code: 'message',
    type: 'input'
  },
  {
    label: '订单状态',
    code: 'status',
    type: 'select',
    options: getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)
  },
  {
    label: '是否有物流单',
    code: 'status',
    type: 'select',
    options: getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)
  },
  {
    label: '是否推物流',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '是否有效订单',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '物流状态',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '内部编码',
    code: 'no',
    type: 'input'
  },
  {
    label: '支付方式 ',
    code: 'dept',
    type: 'select',
    options: [
      {
        label: '中国',
        value: 'CN'
      },
      {
        label: '美国',
        value: 'US'
      }
    ]
  },
  {
    label: '支付单号',
    code: 'no',
    type: 'input'
  }
]

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'link',
    name: '采购链接'
  }
]);


const th = ref([
  {
    name: '订单号',
    code: 'orderId',
    type: 'numberRanger',
    search: true
  },
  {
    name: '所属物流',
    code: 'logistics',
    type: 'date',
    search: true
  },
  {
    name: '物流单号',
    code: 'No',
    search: false
  },
  {
    name: '物流进度',
    code: 'progress',
    type: 'numberRanger',
    search: true
  },
  {
    name: '签收状态',
    code: 'status',
    search: false
  },
  {
    name: '备注',
    code: 'remark',
    search: false
  },
]);
const dataList = ref<PurchaseAdvice[]>([
  {
    id:1,
    orderId: "20201109160037",
    logistics: "中通快递",
    No: "20201109160037",
    progress: "已发货",
    status: "已发货",
    remark: "采购建议",

  },
  {
    id:2,
    orderId: "20201109160037",
    logistics: "中通快递",
    No: "20201109160037",
    progress: "已发货",
    status: "已发货",
    remark: "采购建议",
  }
]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const queryParams = ref({
  ...initQueryParams
})
const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  console.log(val, 'handleSearchQuery')
}

</script>
<style lang="scss" scoped>

</style>
